<script setup lang="ts">
import EChart from "~/contentScripts/views/echart.vue";
import {SycmBrandLists} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";

const props = defineProps({
  brandLists: {
    type: Object as PropType<SycmBrandLists>,
  },
  activeKey: {
    type: String,
    default: '1'
  }
});
const brand1Options = ref<any>({});
const brand2Options = ref<any>({});
const brand3Options = ref<any>({});
const calcOptions = () => {
  showChart.value = false;
  const options = {
    title: {
      text: '',
      left: 'center',
      // 样式
      textStyle: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#444'
      },
    },
    grid: {
      // left: '0%',
      // right: '40%',
      // top: '15%',
      // bottom: '0%'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}:{d}%'
    },
    legend: {
      orient: 'horizontal',
      // right: 'right',
      top:30,
      type: 'scroll',
    },
    series: [
      {
        name: '支付金额占比',
        type: 'pie',
        radius: ['0%', '60%'],
        center: ['50%', '55%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            // fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: []
      }
    ]
  };
  if (props.brandLists?.brand1) {
    brand1Options.value = JSON.parse(JSON.stringify(options));
    brand1Options.value.title.text = props.brandLists?.brand1?.name;
  } else {
    brand1Options.value = {};
  }
  if (props.brandLists?.brand2) {
    brand2Options.value = JSON.parse(JSON.stringify(options));
    brand2Options.value.title.text = props.brandLists?.brand2?.name;
  } else {
    brand2Options.value = {};
  }
  if (props.brandLists?.brand3) {
    brand3Options.value = JSON.parse(JSON.stringify(options));
    brand3Options.value.title.text = props.brandLists?.brand3?.name;
  } else {
    brand3Options.value = {};
  }
  if (props.activeKey == '1') {
    if (props.brandLists?.brand1) {
      brand1Options.value.series[0].data = props.brandLists?.brand1?.CateTradeData?.map((item: any) => {
        let cateName = item.cateName;
        return {
          name: cateName,
          value: item.payAmt.ratio
        }
      });
    }
    if (props.brandLists?.brand2) {
      brand2Options.value.series[0].data = props.brandLists?.brand2?.CateTradeData?.map((item: any) => {
        let cateName = item.cateName;
        return {
          name: cateName,
          value: item.payAmt.ratio
        }
      });
    }
    if (props.brandLists?.brand3) {
      brand3Options.value.series[0].data = props.brandLists?.brand3?.CateTradeData?.map((item: any) => {
        let cateName = item.cateName;
        return {
          name: cateName,
          value: item.payAmt.ratio
        }
      });
    }
  } else {
    if (props.brandLists?.brand1) {
      brand1Options.value.series[0].data = props.brandLists?.brand1?.PriceTradeData?.map((item: any) => {
        return {
          name: item.attrName?.value,
          value: item.payAmt.ratio
        }
      });
    }
    if (props.brandLists?.brand2) {
      brand2Options.value.series[0].data = props.brandLists?.brand2?.PriceTradeData?.map((item: any) => {
        return {
          name: item.attrName?.value,
          value: item.payAmt.ratio
        }
      });
    }
    if (props.brandLists?.brand3) {
      brand3Options.value.series[0].data = props.brandLists?.brand3?.PriceTradeData?.map((item: any) => {
        return {
          name: item.attrName?.value,
          value: item.payAmt.ratio
        }
      });
    }
  }
  nextTick(() => {
    showChart.value = true;
  });
}
const showChart = ref<Boolean>(true);
onMounted(() => {
  calcOptions();
});
watch(() => props.brandLists, (val) => {
  calcOptions();
}, {deep: true});
watch(() => props.activeKey, (val) => {
  calcOptions();
});
</script>

<template>
  <a-row type="flex" v-if="showChart">
    <a-col span="8" v-if="brandLists?.brand1">
      <EChart :options="brand1Options" key="1" style="height: 300px;"/>
    </a-col>
    <a-col span="8" v-if="brandLists?.brand2">
      <EChart :options="brand2Options" key="2" style="height: 300px;"/>
    </a-col>
    <a-col span="8" v-if="brandLists?.brand3">
      <EChart :options="brand3Options" key="3" style="height: 300px;"/>
    </a-col>
  </a-row>
</template>

<style scoped>

</style>
